<template>
	<view class="group_company">
		<view class="contractinfo">
			<view class="constatus">
				<view class="con_status" v-if="info && info.check_status == 0">
					待审核
				</view>
				<view class="con_status" v-if="info && info.check_status == 1">
					审核中
				</view>
				<view class="con_status" v-if="info && info.check_status == 2">
					审核通过
				</view>
				<view class="con_status warnstatus" v-if="info && info.check_status == 3">
					审核未通过
				</view>
				<view class="con_status warnstatus" v-if="info && info.check_status == 4">
					已撤回
				</view>
			</view>
			<view class="nameli">
				<view class="name">{{info && info.name}}</view>
			</view>
			<view class="li_text">
				<view class="protext">
					回款进度
				</view>
				<view class="pro_out">
					<view class="pro_in"
						v-if="info"
						:style="{width:(info.receivables.ratio >= 100 ? 100 : info.receivables.ratio) +'%'}"></view>

				</view>
				<view class="protext" v-if="info">
					{{info.receivables.ratio >= 100 ? 100 : info.receivables.ratio }}%
				</view>
			</view>
			<view class="li_text">
				<view class="protext" v-if="info">
					回款金额：&yen;{{info.money ? info.money : ''}}
				</view>
			</view>
			<view class="content" v-if="info">
				已回款：&yen;{{info.receivables ? info.receivables.repayment_money : ''}}
			</view>
			<view class="content" v-if="info">
				待回款：&yen; {{info.receivables ? info.receivables.be_money : ''}}
			</view>
			<view class="content" v-if="info">
				签约时间：{{info.order_date ? info.order_date : ''}}
			</view>

			<view class="roll">
				<scroll-view scroll-x="true" class="scrollView" lower-threshold="50" enable-flex>
					<view class="scrollbox">
						<view class="scrollView_item"  @click="payment(info.id)">
							<view class="scroll_top">
								{{payment_list.length}}
							</view>
							<view class="scroll_foot">
								回款记录
							</view>
						</view>
						<view class="scrollView_item" @click="plan(info.id)">
							<view class="scroll_top">
								{{plan_list.length}}
							</view>
							<view class="scroll_foot">
								回款计划
							</view>
						</view>
						<view class="scrollView_item" @click="accessory(info.id)">
							<view class="scroll_top">
								{{fileList.length}}
							</view>
							<view class="scroll_foot">
								附件
							</view>
						</view>
						<view class="scrollView_item" @click="opera(info.id)">
							<view class="scroll_top">
								{{opera_list.length}}
							</view>
							<view class="scroll_foot">
								操作记录
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<view class="btnlist" v-if="info && info.is_examine == 1">
			<view class="btn pass" @click="toPass">通过</view>
			<view class="btn refuse" @click="toRefuse">拒绝</view>
		</view>

		<!-- 标签栏 -->
		<view class="group_tab">
			<u-tabs name="cate_name" :list="lists" :is-scroll="false" active-color="#03AA96" :current="current"
				@change="change"></u-tabs>
			<view class="processing_title" v-if="current == 0">
				<customer-dynamic v-if="info" :kehuid="info.id" :type="3"></customer-dynamic>
			</view>
			<view class="processing_title" v-if="current == 1">
				<base-info v-if="info" :info="info"></base-info>
			</view>
		</view>
		<view style="height:100rpx;"></view>
		<!-- 底部导航栏 -->
		<view class="bottom_nav">
			<view class="bottom_item" style="width: 300rpx; margin: 0 auto;" @click="moreClick">
				<image style="width: 48rpx;height: 48rpx;float: left;" :src="BASE_IMG_URL+'morebtn.png'"  mode="scaleToFill"></image>
				<view style="font-size: 34rpx;">更多操作</view>
			</view>
			
			<view>
				<u-popup v-model="show" mode="bottom" border-radius="20" height="110px">
						<view class="pull_head">更多操作</view>
						<view class="pull_con">
							<view class="bottom_item" @click="followClick(info.id,3)">
								<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">写新跟进</view>
							</view>
							<view class="bottom_item" @click="toAddPlan(info.id)">
								<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">回款计划</view>
							</view>
							<view class="bottom_item" v-if="info && info.check_status == 2" @click="toAddPayment(info.id)">
								<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">回款</view>
							</view>
							<view class="bottom_item" v-if="info && (info.check_status == 0 || info.check_status == 1)" @click="removeExamine(info.id)">
								<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">撤回审批</view>
							</view>
							<view class="bottom_item" v-if="info && (info.check_status == 4 || info.check_status == 3)" @click="toEditcontract(info.id)">
								<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">编辑合同</view>
							</view>
						</view>
				</u-popup>
			</view>
		
		</view>

	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/util/api.js'
	import customerDynamic from 'components/content/customerDynamic/customerDynamic.vue';
	import baseInfo from './baseInfo.vue'
	import {
		pageJumps
	} from "../group_page_jumps.js";
	import {
		netContractDetail,
		netCancelExamine,
		netContractFileList,
		netOperationList,
		netEditFileName,
		netPlanListf,
		netPaymentList
	} from '@/api/kehu.js'
	export default {
		mixins: [pageJumps],
		created() {
			
		},
		data() {
			return {
				id: '', //合同id
				contract_id:'',
				relation_id:'',
				relation_type: 3,
				info: {},
				srollLeft: 0,
				taskShow: false,
				show: false,
				
				fileList:[],   //附件列表
				opera_list: [], //操作记录
				plan_list: [], //回款计划 列表
				payment_list: [], //回款  列表 
				type:3,
				types:3,
				BASE_IMG_URL:BASE_IMG_URL,
				list: [{
						num: "123",
						name: "回款记录",
					},
					{
						num: "321",
						name: "回款计划",
					},
					{
						num: "222",
						name: "操作记录",
					},
				],
				current: 0,
				lists: [{
						name: '跟进记录',
						status: 0
					},
					{
						name: '基本信息',
						status: 1
					},
				],
			}
		},
		onLoad(options) {
			this.id = options.id
			
		},
		onHide() {
			this.show = false
		},
		onShow() {
			this.info = null
			this.getInfo()
			
			//操作记录
			this.getOperalist()
			//获取  回款计划 列表
			this.getPlanlist()
			//获取  回款  列表 
			this.getPaymentlist()
			//附件 列表
			this.getFile()
		},
		components: {
			customerDynamic,
			baseInfo,
		},
		methods: {
			change(index) {
				this.current = index;
			},
			tabs_change(e) {
				this.current = e;
				this.mescroll.resetUpScroll();
			},
			moreClick() {
				this.show = true
			},
			onClose() {
				this.show = false
			},
			//附件跳转
			accessory(id){
				uni.navigateTo({
					url: '/pages/index/groupCompany/attachment/attachment?id=' + id +'&types=' + this.types
				})
			},
			//点击 附件  查看
			lookDetail(item) {
				if(item.types.indexOf('image') != -1){
					uni.previewImage({
						urls: [ item.file_path ]
					})
				}else{
					uni.downloadFile({
						url: item.file_path,
						success:(res)=>{
							uni.openDocument({
								filePath:res.tempFilePath,
								success:(res)=>console.log('成功打开文档')
							})
						},
						fail:(err)=>{
							console.log(err,'shibai')
						}
					})
				}
			},
			// 附件 列表
			getFile() {
				let params = { contract_id:this.id }
				netContractFileList(params).then(res=>{
					this.fileList = res.data
				})
			},
			//回款计划 列表
			getPlanlist() {
				netPlanListf({
					contract_id: this.id
				}).then(res => {
					this.plan_list = res.data.data
				})
				
			},
			//回款  列表
			getPaymentlist() {
				netPaymentList({
					contract_id: this.id,
				}).then(res => {
					this.payment_list = res.data.data
				})
			},
			//操作 记录
			getOperalist() {
				let params = {
					relation_type: 3, //1客户  2联系人   3合同
					relation_id: this.id
				}
				netOperationList(params).then(res => {
					this.opera_list = res.data
				})
			},
			//回款列表
			payment(id){
				uni.navigateTo({
					url: '/pages/index/groupCompany/contract/returned?id=' + id
				})
			},
			//回款计划
			plan(id){
				uni.navigateTo({
					url: '/pages/index/groupCompany/contract/plan?id=' + id
				})
			},
			//操作列表
			opera(id){
				console.log(this.type,'type')
				console.log(id,'id')
				uni.navigateTo({
					url: '/pages/index/groupCompany/contract/operation?id='+id +'&relation_type=' + this.type
				})
			},
			//新增合同
			addContract(id) {
				uni.navigateTo({
					url: '/pagesA/crm/contract/contract?id=' + id
				})
			},
			//获取合同 详情信息
			getInfo() {
				netContractDetail({
					id: this.id
				}).then(res => {
					this.info = res.data
				})
			},
			//客户信息
			toKehuInfo() {
				uni.navigateTo({
					url: '/pages/index/groupCompany/groupCompany?id=' + this.info.customer.id
				})
			},
			//添加 回款计划
			toAddPlan(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/contract/addPaymentPlan?id=' + id
				})
			},
			//添加  回款
			toAddPayment(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/contract/addPayment?id=' + id
				})
			},
			//编辑合同
			toEditcontract(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/contract/editContract?id=' + id + '&kehuid=' + this.info.customer.id
				})
			},
			//撤回  审批
			removeExamine(id) {
				uni.showModal({
					title: '提示',
					content: '请确认是否撤回?',
					success: (res) => {
						if (res.confirm) {
							netCancelExamine({
								id
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(() => {
									this.getInfo()
								}, 2000)
							})
						}
					}
				})
			},
			//通过
			toPass() {
				uni.navigateTo({ //status   1成功   2失败
					url: '/pages/examine/examine?id=' + this.id + '&type=contract&status=1'
				})
			},
			//拒绝
			toRefuse() {
				uni.navigateTo({ //status   1成功   2失败
					url: '/pages/examine/examine?id=' + this.id + '&type=contract&status=2'
				})
			}

		}
	}
</script>

<style lang="scss">
	.scrollView {
		height: 140rpx;
		margin-bottom: 70rpx;
		margin-top: 70rpx;
		.scrollbox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.scrollView_item {
			width: 190rpx;
			height: 140rpx;
			background: #fff;
			border-radius: 20rpx;
			text-align: center;
			margin-right: 28rpx;

			:first-child {
				height: 80rpx;
				width: 200rpx;
				color: #03AA96;
				font-size: 54rpx;
				font-weight: 600;
				line-height: 80rpx;
			}

			:last-child {
				height: 60rpx;
				width: 200rpx;
				font-size: 30rpx;
				color: #333;
			}

		}
	}

	.warnstatus {
		color: #ec7f51;
	}

	.contractinfo {
		background: #03AA96;
		padding: 20rpx 42rpx;
		position: relative;

		.constatus {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			background: #fff;
			padding: 5rpx 12rpx;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: black;
			.con_status{
				color:#03AA96;
			}
			.clockimg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.nameli {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 24rpx;

			.zhangimg {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}

			.name {
				font-size: 32rpx;
				color: #fff;
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		.li_text {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			// margin: 0 15rpx;
			.biaoimg {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}

			.protext {
				margin: 15rpx 0;
				font-size: 30rpx;
				color: #fff;
				margin-right: 24rpx;
			}

			.pro_out {
				width: 150rpx;
				height: 30rpx;
				border-radius: 15rpx;
				background: #DDDDDD;
				margin-right: 27rpx;

				.pro_in {
					width: 20%;
					height: 30rpx;
					border-radius: 15rpx;
					background: #FE9440;
				}
			}

			.money {
				font-size: 30rpx;
				color: #fff;
			}
		}

		.content {
			font-size: 30rpx;
			color: #fff;
			margin: 15rpx 0;
		}
	}

	.tabinfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background: #fff;
		border-top: 1rpx solid #C0C0C0;

		.tableft {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.headerimg {
				width: 45rpx;
				height: 45rpx;
				border-radius: 50%;
			}

			.name {
				font-size: 26rpx;
				color: #03aa96;
				margin-left: 24rpx;
			}
		}

		.rightimg {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.btnlist {
		padding: 20rpx 24rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #DDDDDD;
		background: #fff;

		.btn {
			width: 300rpx;
			height: 60rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
		}

		.pass {
			background: #03aa96;
		}

		.refuse {
			background: #F43F3B;
		}
	}

	.group_tab {
		margin: 20rpx 0;
	}

	.bottom_nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		text-align: center;
		color: #999;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 9;
	}
	.pull_head{
		font-size: 34rpx;
		color: #999;
		padding: 30rpx 0;
	}
	.pull_con {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		padding-bottom: 50rpx;
	}
</style>
